<template lang="pug">
  .image-frame.page(v-if="data")
    CtrlBar(@closeBar='data = null')
    .wrap
      img(:src="data")
</template>

<script>
import CtrlBar from '@/components/CtrlBar'
export default {
  name: 'imageIframe',
  data() {
    return {
      data: ''
    }
  },
  mounted() {
    this.$vgo.on('iframe:image', data => {
      this.data = data
    })

    $VM.$vgo.on('iframe:image-close', () => {
      this.data = null
    })
  },
  components: {
    CtrlBar
  }
}
</script>

<style lang="stylus" scoped>
.image-frame
  background-color rgba(0,0,0,0)
  .wrap
    max-width: 1200px
    position: absolute
    left: 50%
    top: 50%
    transform: translate(-50%, -50%)
    img
      width: 100%
</style>
